<template>
    <div>
    <div class="container" style="margin-bottom: 20px;">
        <div>
            <el-tag class="tag-header" :class="selectTag==1?'active':''" @click="selectClick(1)">日报表</el-tag>
            <el-tag class="tag-header" :class="selectTag==2?'active':''" @click="selectClick(2)">月报表</el-tag>
            <el-tag class="tag-header" :class="selectTag==3?'active':''" @click="selectClick(3)">年报表</el-tag>
            <el-tag class="tag-header" :class="selectTag==4?'active':''" @click="selectClick(4)">自定义</el-tag>
            <el-tag class="tag-header" :class="selectTag==5?'active':''" @click="selectClick(5)">能耗汇总</el-tag>
            <el-date-picker v-if="selectTag==4" v-model="selfTime" type="daterange"
                    :picker-options="pickerOptions" unlink-panels value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                            @change="selfChangeTime"
                    end-placeholder="结束日期">
            </el-date-picker>
        </div>
    </div>
    <div class="container">
        <div v-if="selectTag!=5">
            <div class="inline-block" v-if="selectTag!=4">
                <div class="demonstration">统计时间：</div>
                <el-date-picker v-model="statisticTime" size="mini" :type="pickerType"
                        :value-format="valFormat"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="inline-block">
                <div class="demonstration">能耗类型：</div>
                <el-select v-model="energyType" size="mini" placeholder="请选择">
                    <el-option v-for="(item,index) in energyData" :key="index" :label="item.name"
                            :value="parseInt(item.id)">
                    </el-option>
                </el-select>
            </div>
            <div class="inline-block">
                <div class="demonstration">组织类型：</div>
                <el-select v-model="orgType" size="mini" @change="orgTypeChange" placeholder="请选择">
                    <el-option v-for="item in orgTypeData" :key="item.dicValue" :label="item.dicName"
                            :value="item.dicValue">
                    </el-option>
                </el-select>
            </div>
            <div class="inline-block">
                <div class="demonstration">统计对象：</div>
                <el-select v-model="statisticObj" multiple  size="mini" placeholder="请选择">
                    <el-option v-for="item in orgObjData" :key="item.id" :label="item.orgFullName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="inline-block">
                <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
            </div>
            <div class="chart-box">
                <div style="overflow: hidden;">
                    <div id="table-chart1" style="width:98.2%;height:500px;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                </div>
                <div style="overflow: hidden;">
                    <div id="table-chart2" style="width:98.2%; height:500px;border:1px solid #ddd;marginTop:15px;padding:10px;"></div>
                </div>
            </div>
        </div>
        <div v-if="selectTag==5">
            <div>
                <el-tag class="radio-item" :class="selectRadio==1?'radio-active':''" @click="radioClick(1)">日环比汇总</el-tag>
                <el-tag class="radio-item" :class="selectRadio==2?'radio-active':''" @click="radioClick(2)">月环比汇总</el-tag>
                <el-tag class="radio-item" :class="selectRadio==3?'radio-active':''" @click="radioClick(3)">年环比汇总</el-tag>
                <el-tag class="radio-item" :class="selectRadio==4?'radio-active':''" @click="radioClick(4)">月同比汇总</el-tag>
            </div>
            <div class="staick-box">
                <div v-if="selectRadio == 1">
                    <div class="block">
                        <span class="demonstration">开始时间：</span>
                        <el-date-picker v-model="value1" :type="radioPickerType" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="block">
                        <span class="demonstration">结束时间：</span>
                        <el-date-picker v-model="value1" :type="radioPickerType" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <div v-if="selectRadio != 1">
                    <div class="block">
                        <span class="demonstration">统计时间：</span>
                        <el-date-picker v-model="value1" :type="radioPickerType" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="block">
                    <span class="demonstration">能源类型：</span>
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="block">
                    <span class="demonstration">组织类型：</span>
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="block">
                    <span class="demonstration">统计对象：</span>
                    <el-select v-model="value2" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="btn-box">
                    <el-button style="background-color: #8BA3F2;padding: 9px 20px;color: #fff;font-size: 16px;">统计</el-button>
                </div>
            </div>
        </div>

    </div>
    </div>
</template>

<script>
    import {getBaseEnergyTypeListNews,getOrgTypeData,getOrgObjData,getAllBuildListData} from  '../../../api/index';
    var all_this = null;
    export default {
        name: "energy-statistic",
        data(){
            return {
                value1:'',
                value2:'',
                value3:'',

                energyType:'',
                energyData:'',
                orgType:'',
                statisticObj:[],
                statisticTime:'',
                valFormat:'yyyy-MM-dd',
                orgTypeData:'',
                orgObjData:'',
                selfTime:'',
                chart1Data:{},
                chart2Data:'',
                staticisType:1,

                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                selectTag:1,
                pickerType:'date',
                radioPickerType:'date',
                selectRadio:1,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    onPick(){
                        all_this.staticisType = 4;
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            all_this.staticisType = 1;
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            all_this.staticisType = 1;
                            start.setTime(start.getTime() - 3600 * 1000 * 24 );
                            end.setTime(end.getTime() - 3600 * 1000 * 24 );
                            picker.$emit('pick', [start, end]);

                        }
                    },{
                        text: '最近一周',
                        onClick(picker) {
                            all_this.staticisType = 4;
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            all_this.staticisType = 4;
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近两个月',
                        onClick(picker) {
                            all_this.staticisType = 4;
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        mounted(){
            all_this = this;
            this.getEnergyTypeData();
            this.getOrgTypeData();
        },
        methods:{
            getEnergyTypeData(){
                getBaseEnergyTypeListNews({}).then((res)=>{
                    this.energyData = res
                })
            },
            getOrgTypeData(){
                getOrgTypeData({}).then((res)=>{
                    this.orgTypeData = res.datas;
                })
            },
            getOrgObjData(){
                getOrgObjData({
                    typeName:this.orgType
                }).then((res)=>{
                    this.orgObjData = res.datas;
                })
            },
            getAllBuildListData(){
                getAllBuildListData({
                    startDate:this.selectTag==4?this.selfTime[0]:this.statisticTime,
                    endDate:this.selectTag==4?this.selfTime[1]:'',
                    energyType:this.energyType,
                    orgType:this.orgType,
                    ids:this.statisticObj,
                    staticisType:this.staticisType,
                }).then((res)=>{
                    this.chart1Data = {};
                    this.chart2Data = res.BarY;
                    if(res.count>0){
                        this.chart1Data['y'] = [];
                        this.chart1Data['x'] = res.dataX;
                        for(var i=0;i<res.count;i++){
                            var str = 'dataY'+i;
                            this.chart1Data['y'].push(res[str])
                        }
                        this.eharts1Init();
                        this.eharts2Init();
                    }
                })
            },
            orgTypeChange(val){
                this.statisticObj = [];
                this.getOrgObjData();
            },
            searchBtn(){
                this.getAllBuildListData();
            },
            selfChangeTime(val){
                var stepTime = 60*24*60*60*1000;
                if(new Date(val[1]).getTime() - new Date(val[0]).getTime() > stepTime){
                    this.$message.error('时间范围在两个月之内');
                }
            },
            selectClick(v){
                this.selectTag = v
                this.statisticTime = "";
                if(v == 1){
                    this.pickerType = "date"
                    this.valFormat = 'yyyy-MM-dd';
                    this.staticisType = 1;
                }
                if(v == 2){
                    this.pickerType = "month"
                    this.valFormat = 'yyyy-MM';
                    this.staticisType = 2;
                }
                if(v == 3){
                    this.pickerType = "year"
                    this.valFormat = 'yyyy';
                    this.staticisType = 3;
                }
                if(v == 4){
                    this.staticisType = 4;
                }
            },
            radioClick(v){
                this.selectRadio = v;
                if(v==1){
                    this.radioPickerType = 'date'
                }
                if(v==2){
                    this.radioPickerType = 'month'
                }
                if(v==3){
                    this.radioPickerType = 'year'
                }
                if(v==4){
                    this.radioPickerType = 'month'
                }
            },
            eharts1Init() {
                var $_this1 = this;
                // document.getElementById('table-chart1').innerHTML = '';
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = this.$echarts.init(document.getElementById('table-chart1'));
                var dataV = [],lengData = [];
                console.log( $_this1.chart1Data)
                for(var i=0;i<$_this1.chart1Data.y.length;i++){
                    lengData.push($_this1.chart1Data.y[i].txt)
                    var valY = {
                        name: $_this1.chart1Data.y[i].txt,//'用电量',
                        type: 'bar',
                        data: $_this1.chart1Data.y[i].data,//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint: {
                            data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]
                        },
                        markLine: {
                            data: [{type: 'average', name: '平均值'}]
                        }
                    }
                    dataV.push(valY)
                }
                // 绘制图表
                var option1 = {
                    title: {
                        text: $_this1.chart1Data.x.title,//'用电量和用水量',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: lengData//['用电量', '用水量']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data:  $_this1.chart1Data.x.data2//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{
                                formatter:function(val,index){
                                    return val +' '+$_this1.chart1Data.y[0].unit;
                                }
                            }
                        }
                    ],
                    dataZoom: [{show: true, start: 0, end: 100},{type: 'inside', start: 0, end: 100}],
                    series: dataV,
                };
                myChart1.clear();
                myChart1.setOption(option1);
            },
            eharts2Init() {
                var myChart2 = this.$echarts.init(document.getElementById('table-chart2'))
                var $_this2 = this;
                var lengData = [];
                for(var i=0;i<$_this2.chart2Data.length;i++){
                    lengData.push($_this2.chart2Data[i].name);
                }
                var option2 = {
                    title: {
                        text: $_this2.chart1Data.x.title,//new Date().getFullYear()+'标煤比例分析',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: lengData//['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        top: 'middle',
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: $_this2.chart2Data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart2.clear();
                myChart2.setOption(option2);
            },
        },
    }
</script>

<style scoped>
    /deep/ .el-tag{
        margin-right: 25px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        background-color: #fff;
        border: 0;
        cursor: pointer;
    }
    .inline-block{
        display: inline-block;
        margin-right: 20px;
    }
    .inline-block .demonstration{
        margin-bottom: 10px;
        font-size: 14px;
    }
    .tag-header{
        color: #0FBBB5;
    }
    .tag-header.active{
        color: #fff;
        background-color: #0fbbb5;
    }

    /deep/ .el-date-editor.el-input {
        width: 215px;
    }
    .staick-box{
        border: 1px solid #ccc;
        padding: 30px 15px;
    }
    .btn-box{
        width: 295px;
        text-align: center;
    }
    .radio-item{
        color: #333;
    }
    .radio-item.radio-active{
        background-color: #ccc;
        color: #fff;
        border-radius: 0;
    }
    .block{
        margin-bottom: 20px;
    }
    /deep/ .inline-block .el-tag {
        margin-right: 0;
        line-height: 20px;
        height: 20px;
        font-size: 12px;
    }
</style>